<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>introduce</title>
    <meta name="description" content="大一作业，热爱火影多年，借由此页面来表达我对火影的热爱，它是我的青春，供大家学习使用">
    <meta name="Keywords" content="火影,Naruto,静态页面">
    <link rel="icon" href="../shq-splendid.ico">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/introduce.css">
    <link rel="stylesheet" href="../css/font-awesome-4.7.0/css/font-awesome.css">


    <style>
        /*主体右边*/
        .main-right {
            float: right;
            width: 300px;
            height: 100%;


        }

        .right-top {
            height: 260px;
            background-color: #c81623;
            border-top-right-radius: 50px;
            border-top-left-radius: 50px;
            border: black solid 1px;
            margin-right: 2px;
        }

        .right-top .head {
            width: 100%;
            height: 50px;
            background-color: rgb(250, 128, 124);
            border-top-right-radius: 50px;
            border-top-left-radius: 50px;

        }

        .right-top .head p {

            line-height: 50px;
            font-size: 20px;
            color: white;
            text-align: center;
        }

        .right-top .luobo {
            overflow: hidden;
            height: 230px;
            position: relative;
        }

        .right-top .luobo #imglist {
            width: 3000px;
            position: absolute;
            left: 0px;
            right: 0px;
        }

        .luobo .fa-chevron-left {
            position: absolute;
            left: 10px;
            top: 50%;
            margin-top: -15px;
            font-size: 30px;
            color: rgb(250, 128, 124);
            z-index: 1;
        }

        .luobo .fa-chevron-right {
            position: absolute;
            right: 10px;
            top: 50%;
            margin-top: -15px;
            font-size: 30px;
            color: rgb(250, 128, 124);
        }

        .right-top .luobo #imglist li {
            float: left;
            width: 300px;
            height: 230px;

        }

        .right-top .luobo .imglist li img {
            width: 100%;

        }

        #luo-nav {
            position: absolute;
            bottom: 10px;
            left: 50%;
            margin-left: -60px;
        }

        #luo-nav a {
            float: left;
            width: 15px;
            height: 15px;
            border-radius: 7px;
            background-color: red;
            margin: 0 5px;
            opacity: 0.5;

        }

        #luo-nav a:hover {
            background-color: black;
        }

        .right-bottom {
            height: 380px;
            margin-top: 40px;
            background-color: #666666;
            border: black 1px solid;
            border-top-right-radius: 60px;
            border-top-left-radius: 60px;
            margin-right: 2px;
        }

        .right-bottom .head {
            width: 100%;
            height: 60px;
            background-color: rgb(250, 128, 124);
            border-top-right-radius: 60px;
            border-top-left-radius: 60px;
        }

        .right-bottom .head p {
            line-height: 60px;
            font-size: 20px;
            color: white;
            text-align: center;
        }

        .right-bottom .video {
            width: 100%;
            height: 380px;
            background-color: rgb(251, 251, 234);
        }

        .video ul li {
            height: 50px;
            padding: 20px 0px;

        }

        .video ul li audio {
            width: 100%;

        }

        .video ul li p {

            font-size: 15px;
            color: black;
            margin-bottom: 8px;
        }

        .video ul:first-child {
            height: 50px;
            margin: 0;
        }
    </style>
    <script src="../js/introduce.js"></script>

</head>
<body>
<!--导航栏模块-->
<div class="top">
</div>
<div class="nav w">
    <ul>
        <li><a href="introduce.html">首页</a></li>
        <li><a href="grow.html">成长之路</a></li>
        <li><a href="role.html">登场人物</a></li>
        <li><a href="author.html">作者简介</a></li>
        <li><a href="check.html">问卷调查</a></li>
        <li><a href="movie.html">剧场版介绍</a></li>
    </ul>
</div>
<!--主页主体模块-->
<div class="main w">
    <!--主体左边-->
    <div class="main-left">
        <div class="intro">

            <p>故事简介</p>

        </div>
        <div class="Naturo">
            <p>火影忍者（Naturo）</p>
        </div>
        <div class="fontintro">
            <div class="img">
                <img src="../images/fontintro.jpg" alt="">
            </div>
            <div class="content">
                <p>《火影忍者》(日语：NARUTO
                    -ナルト-)，又译狐忍，是日本漫画家岸本齐史的少年漫画作品。描述在作者虚构的世界中，男主角漩涡鸣人与其伙伴的经历。第一部故事(漫画共244话，动画共220话)已经结束，第二部目前尚未完结，作者预计会出至第三部完成整个故事，届时将成为东京电视台的长寿节目。另有《卡卡西外传》(共6话)、《临之书》、《兵之书》、《斗之书》、《者之书》、《皆之书》及剧场版动画片《大活剧!雪姬忍法帖》、《大激突!梦幻的地底遗迹》、《大兴奋!新月岛动物大骚乱》、《鸣人将死》、《羁绊》、《火意志的继承者》、《失落之塔》。作者预计会继续出一系列的设定书，分别为阵、列、在、前之书，加上之前的临、兵、斗、者、皆之书总共九本。(每一部为三本。)另外，亦有一部名为《秘传·翔之书》的短片作品(随同日本JUMP周刊附送)，对第二部中的官方角色作简单介绍。</p>
                <p>因为剧情紧凑，奇特变幻虚拟术技，加上剧情节奏感十足，颇受日本、甚至华人地区欢迎。也因此，该系列漫画及周边都成为瞩目作品，拥有许多支持书迷影迷。</p>
                <p>
                    至于延伸出的动画作品，即使在漫画开始连载后就已决定动画化，并着手剧情规划，不过后期的动画情节发展仍与漫画相差甚远。前期动画版本的每话，通常包括漫画两话的故事。为了避免情节发展重叠或超出原著，动画版在第136集到220集将漫画的情节改播原创情节。另外在第二部中，动画的277-291，310-332集、364-371集及396-416集为原创情节。该动画于日本收视屡获高收视率，剧中虚拟主角鸣人甚至还破记录的入选成为2006年10月号《NEWSWEEK》日文版特集里面，“全世界最尊敬的100位日本人”中一员。2004年漫画进而改编成电影，延续漫画动画销售情况，火影忍者系列电影仍持续卖座，2004年-2006年，连续三年的电影观影人次突破300万人。</p>

            </div>
        </div>
    </div>
    <!--    主体右边-->
    <div class="main-right">
        <div class="right-top">
            <div class="head">
                <p>情 侣 风 采</p>
            </div>
            <div class="luobo clearfix">
                <i class="fa fa-chevron-left"></i>
                <ul id="imglist">
                    <li><img src="../images/love1.jpg"></li>
                    <li><img src="../images/love2.jpg"></li>
                    <li><img src="../images/love3.jpg"></li>
                    <li><img src="../images/love4.jpg"></li>
                    <li><img src="../images/love5.jpg"></li>
                    <li><img src="../images/love6.jpg"></li>
                    <li><img src="../images/love1.jpg"></li>
                </ul>
                <div id="luo-nav">
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                </div>
                <i class="fa fa-chevron-right"></i>
            </div>
        </div>

        <div class="right-bottom">
            <div class="head">
                <p>精 美 曲 目</p>
            </div>
            <div class="video">
                <ul class="vid">
                    <li>
                        <p>1.ニワカ雨ニモ负ケズ:</p>
                        <audio src="../music/曲目1.MP3" controls="controls"></audio>
                        <hr>
                    </li>
                    <li>
                        <p>2.Sign</p>
                        <audio src="../music/曲目2.MP3" controls="controls"></audio>
                        <hr>
                    </li>
                    <li>
                        <p>3.透明だった世界</p>
                        <audio src="../music/曲目3.MP3" controls="controls"></audio>
                        <hr>
                    </li>
                    <li>
                        <p>4.うたかた花火</p>
                        <audio src="../music/曲目4.MP3" controls="controls"></audio>
                        <hr>
                    </li>
                </ul>
            </div>

        </div>
    </div>
</div>

<hr>
<footer>
    Copyright©2017 郑州大学宋沆群 All Rights Reserved. <br/>
    建议采用使用的浏览器有：IE9.0、Firefox 4 、Safari5.1.7 、Chrome13 和 Opera11.5或更高版本。 <br/> 技术支持：宋沆群
</footer>
</body>
</html>